<template>
  <view class="page">
    <view class="main padding-0">
      <view style="background: #fcde43">
        <image :src="IMAGE_URL +
          '/profile/content/2025/05/16/bHvrrhhprknabe899b9a2be6d842a427259e1fcdd282_20250516133309A009.png'
          " style="width: 100%" mode="widthFix"></image>
      </view>

      <view class="padding">
        <uni-calendar :insert="true" color="#9CB95A" :showMonth="false" :selected="monthList" @change="change"
          @monthSwitch="monthSwitch" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { monthReportListApi } from '@/api/report.js';
import { onLoad } from '@dcloudio/uni-app';
import MOOD_LIST from '@/utils/constant';
import { IMAGE_URL } from '@/utils/env';
import dayjs from 'dayjs';
onLoad((options) => {
  getMonthList(options.sid);
});
const monthList = ref([]);
const getMonthList = async (sid) => {
  const params = {
    month: dayjs().format('YYYY-MM'),
    studentId: sid
  };
  const response = await monthReportListApi(params);
  if (response.code === 200) {
    response.data.map((item) => {
      monthList.value.push({
        date: dayjs(item.reportDate).format('YYYY-MM-DD'),
        info: MOOD_LIST[item.dailyStatus].title,
        reportId: item.reportId
      });
    });
  }
};
const change = (e) => {
  const result = monthList.value.find((item) => {
    return item.date === e.fulldate;
  })
  if (result) {
    uni.navigateTo({
      url: `/pages-sub/report/detail?reportId=${result.reportId}`
    })
  }
};
const monthSwitch = () => { };
</script>

<style lang="less" scoped>
.page {
  background: #fffefa;
}
</style>
